import { useEffect, useState } from "react";
import { PageContainer } from "@ant-design/pro-layout";
import useCommonTable from "@/hooks/useCommonTable";
import { fetchList, update, add, remove } from "@/api/vacation";

import {
  ProFormText,
  ProFormDateTimeRangePicker,
  ProFormSelect,
  ProFormTextArea,
  ProFormRadio,
} from "@ant-design/pro-form";
import { Tag } from "antd";
import { fetchList as fetchTeacherList } from "@/api/teacher";

export default () => {
  const [teacherList, setTeacherList] = useState([]);

  const getTeacherList = async () => {
    const res = await fetchTeacherList({
      page: 1,
      pageSize: 100,
    });
    const data = res.data?.map((item) => {
      item.key = String(item._id);
      item.tab = item.name;
      return item;
    });
    setTeacherList(data);
  };
  useEffect(() => {
    getTeacherList();
  }, []);

  const columns = [
    {
      title: "老师姓名",
      dataIndex: "teacherName",
      width: 150,
      search: false,
    },
    {
      title: "请假时间",
      width: 200,
      search: false,
      render: (_, record) => {
        return `${record.startTime}-${record.endTime}`;
      },
    },
    {
      title: "是否扣费",
      width: 100,
      search: false,
      render: (_, record) => {
        return record.status ? (
          <Tag color="green">是</Tag>
        ) : (
          <Tag color="red">否</Tag>
        );
      },
    },
  ];
  const renderFormItem = ({ formRef }) => {
    return (
      <>
        <ProFormSelect
          width="lg"
          name="teacherId"
          label="教师"
          allowClear
          fieldProps={{
            options: teacherList,
            onChange: (teacherId) => {
              const current = teacherList.find((item) => item._id == teacherId);
              formRef?.current.setFieldsValue({
                teacherName: current.name,
              });
            },
            fieldNames: {
              label: "name",
              value: "_id",
            },
          }}
          rules={[{ required: true, message: "请选择教师" }]}
        />
        <ProFormText label="老师名称" name="teacherName" hidden />
        <ProFormDateTimeRangePicker
          width="lg"
          label="请假日期"
          name="time"
          placeholder={["开始日期", "结束日期"]}
          fieldProps={{
            format: "YYYY/MM/DD HH:mm",
          }}
          transform={(values) => {
            return {
              startTime: values ? values[0] : undefined,
              endTime: values ? values[1] : undefined,
            };
          }}
          rules={[
            {
              required: true,
              message: "请选择日期段",
            },
          ]}
        />

        <ProFormTextArea
          width="lg"
          fieldProps={{
            rows: 5,
          }}
          name="remark"
          rules={[{ required: true, message: "请输入请假事由" }]}
          label="请假事由"
          placeholder="请输入请假事由"
        />

        <ProFormRadio.Group
          label="是否扣费"
          name="status"
          options={[
            {
              value: true,
              label: "是",
            },
            {
              value: false,
              label: "否",
            },
          ]}
        />
      </>
    );
  };
  return (
    <PageContainer>
      {useCommonTable({
        title: "请假",
        renderFormItem,
        columns,
        modalWidth: 600,
        initialValues: {
          status: false,
        },
        fetchList: async (params) => {
          const res = await fetchList(params);
          res.data = res.data?.map((item) => {
            return {
              ...item,
              time: [item.startTime, item.endTime],
            };
          });
          console.log("res===", res);
          return res;
        },
        add,
        update,
        remove,
        actionColumnWidth: 200,
        showCheckbox: false,
      })}
    </PageContainer>
  );
};
